<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">
<title>The Sandbox &middot; An explanation</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css" media="screen">
/*<![CDATA[*/
body { font-size: 115%; line-height: 150%; margin: 2em; padding: 0; }
/*]]>*/
</style>
<style type="text/css" media="all">
/*<![CDATA[*/
blockquote cite { display: block; margin: 1em 0; }
blockquote p strong { font-weight: normal; text-transform: uppercase; }
blockquote { background: #eee; color: #000; padding: 0.1em 1em; }
body { background: #fff; color: #000; }
code span { font-weight: bold; }
code, pre { font-family: "courier new", courier, monospace; font-size: 0.9em; }
hr { margin: 2em 0; }
ol li { list-style: decimal; }
ol ol li { list-style: lower-alpha; }
table tbody th, table tfoot th { background: #ddd; color: #000; text-align: left; }
table tbody tr.even { background: #f4f4f4; color: #333; }
table td sup { font-size: 0.5em; }
table th, table tr, table td { border: 1px solid #666; padding: 0.1em 0.5em; }
table thead th { background: #ccc; color: #000;}
table { border: 1px solid #666; border-collapse: collapse; }
table { width: 99%; }
ul li span { display: block; width: 95%; font-style: italic; margin-bottom: 0.5em; }
ul li { list-style: square; }
/*]]>*/
</style>
</head>
<body>

<h1 id="title">The Sandbox</h1>

<p>Thank you for reading me. I was last revised <span>12 August 2006 @ 19:48</span>.</p>

<hr/>

<h2 id="contents">Table of Contents</h2>

<ol id="menu">
	<li><a href="#introduction" title="Skip to Introduction">Introduction</a></li>
	<li><a href="#class-functions" title="Skip to Class functions">Class funtions</a>
		<ol>
			<li><a href="#body-class" title="Skip to sandbox_body_class()"><code>sandbox_body_class()</code></a></li>
			<li><a href="#post-class" title="Skip to sandbox_post_class()"><code>sandbox_post_class()</code></a></li>
			<li><a href="#comment-class" title="Skip to sandbox_comment_class()"><code>sandbox_comment_class()</code></a></li>
		</ol>
	</li>
	<li><a href="#widgets" title="Skipt to Sandbox widgets">Sandbox widgets</a></li>
	<li><a href="#hatom" title="Skip to hAtom microformat">hAtom microformat</a></li>
	<li><a href="#license" title="Skip to License information">License information</a></li>
</ol>

<hr/>

<h2 id="introduction">1. Introduction</h2>

<p>The Sandbox is a lot of things. For example, it's</p>

<ul>
	<li>for WordPress 2.0.x and 2.1.x.</li>
	<li>valid XHTML 1.0 Transitional.</li>
	<li>widgets-friendly.</li>
	<li>got a theme admin menu.</li>
	<li>a one, two, and three column theme.</li>
	<li>beautiful on the inside.</li>
</ul>

<p>But it's a lot more. What began as Scott's leftovers has become a well-crafted, semantics-based theme. Andy's added his innovative semantic class generating functions. Semantic markup is really what this theme is all about.</p>

<p>So what can you do with the Sandbox?</p>

<ul>
	<li>You can just install it, have a super-cool minimalist theme, and be done with the whole thing.</li>
	<li>You can skin it with CSS alone&mdash;no need to edit any of the Sandbox files.</li>
	<li>You can steal the functions, markup, theme files, et al, as pleases you.</li>
	<li>You can use it as a good place to learn a few things about CSS, XHTML, and PHP, perhaps.</li>
</ul>

<p>The real feature of the Sandbox is its markup. The use of class-generating functions in the <code>body</code>, post <code>div</code>, and comment/trackback/ping <code>li</code> tags create an truly semantic, extendible backbone for any theme. As Andy said, <q cite="http://andy.wordpress.com/2006/07/20/generated-semantic-classes-2/" title="Generated Semantic Classes 2">Given straightforward markup with plenty of selectors, there isn’t much that can’t be accomplished with CSS and a decent browser.</q></p>

<p>And the implementation of the hAtom microformat means we're looking forward (and pleasing the barons at Technorati). You might be able to improve on our markup, but, well, who wants to work that hard?</p>

<hr/>

<h2 id="class-functions">2. Class functions</h2>

<p>The three semantic class generating functions used in the Sandbox are charted below, outlining what semantic classes are generated by each function (&#8220;Class&#8221;), how it relates to WordPress (&#8220;WordPress Tag&#8221;), and the usage of these classes (&#8220;Usage&#8221;). For more on the WordPress Tag aspect, read the <a href="http://codex.wordpress.org/Conditional_Tags" title="Conditional Tags &laquo; WordPress Codex">Conditional Tags</a> article on the WordPress Codex.</p>

<h3 id="body-class">2.a. <code>sandbox_body_class()</code></h3>

<p>The <code>sandbox_body_class()</code> function is definied in the functions.php file. It has no parameters. It adds semantic classes to the <code>body</code> tag relative to the page that is being displayed. It is used in the header.php file as follows:</p>

<div>
	<code>&lt;body class="<span>&lt;?php sandbox_body_class(); ?&gt;</span>"&gt;</code>
</div>

<p>The chart below lists the classes added to the <code>body</code> tag by this function.</p>

<table id="body-class-table" summary="Classes given to the body tag by the Sandbox function, sandbody_body_class()">
	<thead>
		<tr>
			<th colspan="3" scope="colgroup"><code>sandbox_body_class()</code></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th colspan="3" scope="colgroup">CSS example</th>
		</tr>
		<tr>
			<td colspan="3" scope="row" abbr="CSS example"><code>body.single div.sidebar { display: none; }</code></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="col" abbr="class">Class</th>
			<th scope="col" abbr="tag">WordPress Tag</th>
			<th scope="col" abbr="use">Usage</th>
		</tr>
		<tr>
			<td scope="row">archive</td>
			<td><code>is_archive()</code></td>
			<td>When <em>any</em> archive page is displayed, i.e., applies to category-, date-, and author-based archive pages</td>
		</tr>
		<tr class="even">
			<td scope="row">attachment</td>
			<td><code>is_attachment()</code></td>
			<td>When the post subpage containing an attachment is displayed, as set with "Linked to Page" in the post editor</td>
		</tr>
		<tr>
			<td scope="row">author</td>
			<td><code>is_author()</code></td>
			<td>When a author archive page is displayed</td>
		</tr>
		<tr class="even">
			<td scope="row">author-[name]</td>
			<td><code>is_author('nicename')</code></td>
			<td>When a specific author archive page is displayed, where <i>[name]</i> is the author's login name, e.g., author-admin</td>
		</tr>
		<tr>
			<td scope="row">category</td>
			<td><code>is_category()</code></td>
			<td>When a category archive page is displayed</td>
		</tr>
		<tr class="even">
			<td scope="row">category-[name]</td>
			<td><code>is_category('nicename')</code></td>
			<td>For a specific category, where <i>[name]</i> is the category slug, e.g., category-useful-links</td>
		</tr>
		<tr>
			<td scope="row">d01–31</td>
			<td><code>gmdate('d')</code></td>
			<td>The current day of when the page is displayed (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">date</td>
			<td><code>is_date()</code></td>
			<td>When a date archive page is displayed, e.g., by month, by year</td>
		</tr>
		<tr>
			<td scope="row">h00–h24</td>
			<td><code>gmdate('h')</code></td>
			<td>The current hour of when the page is displayed (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">four04</td>
			<td><code>is_404()</code></td>
			<td>When a request results in zero posts, i.e., a 404 error page</td>
		</tr>
		<tr>
			<td scope="row">home</td>
			<td><code>is_home()</code></td>
			<td>When the home page is displayed</td>
		</tr>
		<tr class="even">
			<td scope="row">m00–m12</td>
			<td><code>gmdate('m')</code></td>
			<td>The current month of when the page is displayed (Offset to GMT)</td>
		</tr>
		<tr>
			<td scope="row">loggedin</td>
			<td>N/A</td>
			<td>When the page is displayed by a logged-in user</td>
		</tr>
		<tr>
			<td scope="row">page</td>
			<td><code>is_page()</code></td>
			<td>When a page is displayed</td>
		</tr>
		<tr>
			<td scope="row">page-author-[name]</td>
			<td><code>is_page()</code></td>
			<td>For a page by a specific author, where <i>[name]</i> is the user's login name, e.g., page-author-admin</td>
		</tr>
		<tr class="even">
			<td scope="row">paged</td>
			<td><code>is_paged()</code></td>
			<td>When whatever is displayed is "paged," e.g., page 2 of the index</td>
		</tr>
		<tr>
			<td scope="row">search</td>
			<td><code>is_search()</code></td>
			<td>When the results of a search are displayed</td>
		</tr>
		<tr class="even">
			<td scope="row">single</td>
			<td><code>is_single()</code></td>
			<td>When a single post is displayed</td>
		</tr>
		<tr>
			<td scope="row">s-author-[name]</td>
			<td><code>is_single()</code> &amp; <code>is_author()</code></td>
			<td>For a single post published by a specific author, where <i>[name]</i> is the user's login name, e.g., s-author-admin</td>
		</tr>
		<tr>
			<td scope="row">s-category-[name]</td>
			<td><code>is_single()</code> &amp; <code>is_category()</code></td>
			<td>For a single post published in a specific category, where <i>[name]</i> is the category slug, e.g., s-category-news</td>
		</tr>
		<tr>
			<td scope="row">s-d01–31</td>
			<td><code>gmdate('d')</code></td>
			<td>For a single post published on a specific day (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">s-h00–h24</td>
			<td><code>gmdate('h')</code></td>
			<td>For a single post published at a specific hour (Offset to GMT)</td>
		</tr>
		<tr>
			<td scope="row">s-m00–m12</td>
			<td><code>gmdate('m')</code></td>
			<td>For a single post published in a specific month (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">s-y2006</td>
			<td><code>gmdate('Y')</code></td>
			<td>For a single post published in a specific year (Offset to GMT)</td>
		</tr>
		<tr>
			<td scope="row">wordpress</td>
			<td>N/A</td>
			<td>When anything is displayed; a class that is always applied</td>
		</tr>
		<tr class="even">
			<td scope="row">y2006</td>
			<td><code>gmdate('Y')</code></td>
			<td>The current year of when the page is display (Offset to GMT)</td>
		</tr>
	</tbody>
</table>

<h3 id="post-class">2.b. <code>sandbox_post_class()</code></h3>

<p>The <code>sandbox_post_class()</code> function is definied in the functions.php file. It has no parameters. It adds semantic classes to each post <code>div</code> relative to the post that this <code>div</code> wraps. It is used in many of the theme files as follows:</p>

<div>
	<code>&lt;div id="post-&lt;?php the_ID(); ?&gt;" class="<span>&lt;?php sandbox_post_class(); ?&gt;</span>"&gt;</code>
</div>

<p>The chart below lists the classes added to each post <code>div</code> tag by this function.</p>

<table id="post-class-table" summary="Classes given to individual posts by the Sandbox function, sandbody_post_class()">
	<thead>
		<tr>
			<th colspan="3" scope="colgroup"><code>sandbox_post_class()</code></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th colspan="3" scope="colgroup">CSS example</th>
		</tr>
		<tr>
			<td colspan="3" scope="row" abbr="CSS example"><code>div.category-news .entry-title { background: url(news.png); }</code></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="col" abbr="class">Class</th>
			<th scope="col" abbr="tag">WordPress Tag</th>
			<th scope="col" abbr="use">Usage</th>
		</tr>
		<tr>
			<td scope="row">alt</td>
			<td>N/A</td>
			<td>For odd-numbered posts, e.g., 1<sup>st</sup>, 3<sup>rd</sup>, 5<sup>th</sup>, etc.</td>
		</tr>
		<tr class="even">
			<td scope="row">author-[name]</td>
			<td><code>is_author('usernicename')</code></td>
			<td>For any specific author, where <i>[name]</i> is the user's login name, e.g., author-admin</td>
		</tr>
		<tr>
			<td scope="row">category-[name]</td>
			<td><code>is_category('nicename')</code></td>
			<td>For any specific category, where <i>[name]</i> is the category slug, e.g., category-news</td>
		</tr>
		<tr class="even">
			<td scope="row">hentry</td>
			<td>N/A</td>
			<td>For the hAtom 0.1 specification, applied every post</td>
		</tr>
		<tr>
			<td scope="row">p[n]</td>
			<td>N/A</td>
			<td>For counting posts relative to the top of the page, where <i>[n]</i> is the number, e.g., p1 for the first post, p2 for the second post, p3 for the third post, etc.</td>
		</tr>
		<tr>
			<td scope="row">post</td>
			<td>N/A</td>
			<td>A general class, applied to every post</td>
		</tr>
		<tr class="even">
			<td scope="row">publish</td>
			<td>N/A</td>
			<td>For any published post, as contrasted with an unpublished draft</td>
		</tr>
		<tr>
			<td scope="row">h00–h24</td>
			<td><code>gmdate('h')</code></td>
			<td>For a post published at a specific hour (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">d01–31</td>
			<td><code>gmdate('d')</code></td>
			<td>For a post published on a specific day (Offset to GMT)</td>
		</tr>
		<tr>
			<td scope="row">m00–m12</td>
			<td><code>gmdate('m')</code></td>
			<td>For a post published in a specific month (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">y2006</td>
			<td><code>gmdate('Y')</code></td>
			<td>For a post published in a certain year (Offset to GMT)</td>
		</tr>
	</tbody>
</table>

<h3 id="comment-class">2.c. <code>sandbox_comment_class()</code></h3>

<p>The <code>sandbox_comment_class()</code> function is definied in the functions.php file. It has no parameters. It adds semantic classes to the each comment <code>li</code> tag (&#8220;comment&#8221; here meaning comments, trackbacks, and pingbacks). It is used in the comments.php file as follows:</p>

<div>
	<code>&lt;li id="comment-&lt;?php comment_ID(); ?&gt;" class="<span>&lt;?php sandbox_comment_class(); ?&gt;</span>"&gt;</code>
</div>

<p>The chart below lists the classes added to each comment <code>li</code> tag by this function. Again, note that "comment" includes comments, trackbacks, and pingbacks.</p>

<table id="comment-class-table" summary="Classes given to individual comments by the Sandbox function, sandbody_comment_class()">
	<thead>
		<tr>
			<th colspan="3" scope="colgroup"><code>sandbox_comment_class()</code></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th colspan="3" scope="colgroup">CSS example</th>
		</tr>
		<tr>
			<td colspan="3" scope="row" abbr="CSS example"><code>div.comments li.bypostauthor { border: 1px solid red; }</code></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="col" abbr="class">Class</th>
			<th scope="col" abbr="tag">WordPress Tag</th>
			<th scope="col" abbr="use">Usage</th>
		</tr>
		<tr>
			<td scope="row">alt</td>
			<td>N/A</td>
			<td>For odd-numbered comments, e.g., 1<sup>st</sup>, 3<sup>rd</sup>, 5<sup>th</sup>, etc.</td>
		</tr>
		<tr class="even">
			<td scope="row">bypostauthor</td>
			<td>N/A</td>
			<td>When the comment author is also the post author</td>
		</tr>
		<tr>
			<td scope="row">byuser</td>
			<td>N/A</td>
			<td>For <em>any</em> comment by a registered user</td>
		</tr>
		<tr class="even">
			<td scope="row">c-h00–h24</td>
			<td><code>gmdate('h')</code></td>
			<td>For a comment posted at a specific hour (Offset to GMT)</td>
		</tr>
		<tr>
			<td scope="row">c[n]</td>
			<td>N/A</td>
			<td>For counting comments relative to the first, where <i>[n]</i> is the number, e.g., c1 for the first comment, c2 for the second comment, c3 for the third comment, etc.</td>
		</tr>
		<tr>
			<td scope="row">c-d01–31</td>
			<td><code>gmdate('d')</code></td>
			<td>For a comment posted on a specific date (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">c-m00–m12</td>
			<td><code>gmdate('m')</code></td>
			<td>For a comment posted in a specific month (Offset to GMT)</td>
		</tr>
		<tr>
			<td scope="row">c-y2006</td>
			<td><code>gmdate('Y')</code></td>
			<td>For a comment posted in a specific year (Offset to GMT)</td>
		</tr>
		<tr class="even">
			<td scope="row">comment</td>
			<td>N/A</td>
			<td>A general class, applied to every comment</td>
		</tr>
		<tr>
			<td scope="row">comment-author-[name]</td>
			<td>N/A</td>
			<td>For a comment by a specific registered user, where <i>[name]</i> is the user's login name, e.g., comment-author-john</td>
		</tr>
		<tr class="even">
			<td scope="row">trackback</td>
			<td>is_trackback()</td>
			<td>When a comment is a trackback/pingback</td>
		</tr>
	</tbody>
</table>

<hr/>

<h2 id="widgets">3. Sandbox widgets</h2>

<p>The Sandbox automatically loads a few Sandbox-specific widgets into the <i>Presentation > Sidebar Widgets</i> menu. This is to allow for true customization of the Sandbox sidebars. Two new widgets are added automatically (no need to active anything). Two default widgets (as defined in the Widgets plugin) are replaced with Sandbox-specific versions.</p>

<p>First fist new widget loaded is the "Home Link" widget. Placing this widget in the sidebar will generate a link back to the home page. This link, <code>&laquo; Home</code> by default, only appears on pages that <em>are not the home page</em>, though it will appear on pages of the home page, i.e., page 2 of the index.</p>

<p>The second new widget is the "RSS Links" widget also relates to the default "Meta" widget, which Sandbox also customizes. In the Widgets plugin default "Meta" widget, RSS links are coupled with the register, log in/log out links, and the <code>wp_meta()</code> function. This new "RSS Links" widget and the Sandbox-specific "Meta" widget allow widgets to emmulate the default sidebars.</p>

<p>And, the Sandbox also specifies its own "Search" widget, which is the same as what is in the sidebar.php file. Basically, all we've done is made everything consistent.</p>

<hr/>

<h2 id="hatom">4. hAtom microformat</h2>

<p>The Sandbox implements the hAtom 0.1 microformat. hAtom is a step towards standardized, semantic blog post markup. It's best if the Microformats people explain:</p>

<blockquote cite="http://microformats.org/wiki/hatom#Introduction" title="hAtom - Microformats">

	<p>hAtom is a microformat for identifying semantic information in weblog posts and practically any other place <a href="http://www.atomenabled.org/" title="AtomEnabled">Atom</a> may be used, such as news articles. hAtom content is easily added to most blogs by simple modifications to the blog's template definitions.</p>

</blockquote>

<p>So we've modified the Sandbox &#8220;template definitions,&#8221; whatever that means. You can read the details on the <a href="http://microformats.org/wiki/hatom" title="hAtom - Microformats">hAtom Wiki</a>. So feel good, you're a step ahead in adopting yet another standard, too. Probably.</p>

<hr/>

<h2 id="license">5. License information</h2>

<p>The Sandbox &copy; 2006 is licensed under the GNU General Public License:</p>

<blockquote title="How to use the GPL or LPGL" cite="http://www.gnu.org/licenses/gpl-howto.html">

	<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>

	<p>This program is distributed in the hope that it will be useful, but <strong>without any warranty</strong>; without even the implied warranty of <strong>merchantability</strong> or <strong>fitness for a particular purpose</strong>. See the GNU General Public License for more details.</p>

	<p>You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA</p>

</blockquote>

<p>For more information on what exactly this means, please read the <cite title="GNU General Public License"><a href="http://www.gnu.org/licenses/gpl.html" title="GNU General Public License" rel="license">GNU General Public License</a></cite>. For a slightly more digestable version, check out <a href="http://en.wikipedia.org/wiki/Gpl" title="GPL - Wikipedia">GPL on Wikipedia</a>.</p>

</body>
</html>